<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>明德教务系统</title>
  <link rel="stylesheet" href="../static/JS/layui/css/layui.css">
  <link rel="stylesheet" href="https://unpkg.com/nprogress@0.2.0/nprogress.css">
  <link rel="stylesheet" href="/static/css/lightbox.css">
</head>
<style>
  .r {
    height: 100%;
    position: fixed;
    right: 69px;
    top: 60px;
    background-color: #23262e;
    color: #ccc;
    z-index: 1000;

  }

  .c-red {
    color: red;
  }

  .c-green {
    color: green;
  }

  .c-ccc {
    color: rgb(112, 111, 111);
  }

  .shadow {
    animation: toop .5s;

  }

  @keyframes toop {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  .showShadow {
    animation: comeOp 2s;
  }

  @keyframes comeOp {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .ative {
    animation: rightToleft 1s ease;
  }

  @keyframes rightToleft {
    from {
      transform: translate3d(100%, 0px, 0);
      opacity: 0;

    }

    to {
      transform: translate3d(0, 0px, 0);
      opacity: 1;
    }
  }

  .ativeout {
    animation: leftTorigh 0.5s ease;
  }

  @keyframes leftTorigh {
    from {
      transform: translate3d(0, 0px, 0);
      opacity: 1;
    }

    to {
      transform: translate3d(100%, 0, 0);
      opacity: 0;
    }
  }

  .hide {
    display: none;
  }

  form input {
    outline: none;
  }

  .edit_on {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-content: center;

  }

  .edit_on div {
    margin-top: 50px;
  }

  .artbox {
    text-align: center;
    padding-bottom: 50px;
  }

  .artbox table {
    margin: 0 auto;
  }

  .layui-table th {
    text-align: center;
  }

  .edit_on div {
    margin-top: 50px;
  }

  .ganfan {

    font-size: 35px;
    margin: 50px;
  }

  .yl img {
    width: 120px;
    max-height: 120px;

  }

  .layui-table img {
    max-height: 40px;
  }

  #inquiry {
    padding-bottom: 5px;
  }

  .title {
    overflow: hidden;
    width: 150px;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    margin: 0 auto;
    /* text-decoration: underline; */
  }

  .unline {
    border-bottom: 1px solid #23262e;
  }

  .search {
    width: 600px;
    text-align: left;
  }
  .shenhe{
    border: 1px rgb(223, 221, 221) solid;
    width: 150px;
    height: 38px;
  }
</style>
<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black">明德教务系统</div>
      <!-- 头部区域（可配合layui 已有的水平导航） -->
      <ul class="layui-nav layui-layout-left">
        <!-- 移动端显示 -->
        <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
          <i class="layui-icon layui-icon-spread-left"></i>
        </li>

        <li class="layui-nav-item layui-hide-xs"><a href="">java班</a></li>
        <li class="layui-nav-item layui-hide-xs"><a href="">web班</a></li>
        <li class="layui-nav-item layui-hide-xs"><a href="">试读班</a></li>
        <li class="layui-nav-item">
          <a href="javascript:;">nav groups</a>
          <dl class="layui-nav-child">
            <dd><a href="">a 标签</a></dd>
            <dd><a href="">a 标签</a></dd>
            <dd><a href="">a 标签</a></dd>
          </dl>
        </li>
      </ul>
      <ul class="layui-nav layui-layout-right">
        <li class="layui-nav-item layui-hide layui-show-md-inline-block">
          <a href="javascript:;">
            上次登录时间:{{ Userinfo.last_login |dateFormat2 }}
            <img src="{{Userinfo.avurl}}" class="layui-nav-img" id="avurl">
            {{Userinfo.username }}

          </a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">个人信息</a></dd>
            <dd><a href="javascript:;" onclick="changeurl()">更换头像</a> <input type="file" class="hide changeurl"></dd>
            <dd><a href="javascript:;" onclick="updatapassword()">修改密码</a></dd>
            <dd> <a href="/logout">退出登录</a></dd>

          </dl>
        </li>
        <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
          <a href="javascript:;">
            <i class="layui-icon layui-icon-more-vertical"></i>
          </a>
        </li>
      </ul>
    </div>

    <div class="layui-side layui-bg-black">
      <div class="layui-side-scroll">
        <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
          <li class="layui-nav-item"><a href="">首页</a></li>
          <li class="layui-nav-item layui-nav-itemed">
            
            <a class="" href="javascript:;">文章管理</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;" id="list_art">文章列表</a></dd>
              <dd><a href="javascript:;" id="list_add">添加文章</a></dd>
              <!-- <dd><a href="javascript:;" id="list_classify">分类管理</a></dd> -->
              <dd><a href="javascript:;" id="list_recyclework">进入回收站</a></dd>

            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;">分类管理</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;" id="list_classify">分类列表</a></dd>
              <dd><a href="javascript:;" id="list_classifyAdd">添加分类</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="javascript:;" id="list_eat">实时干饭</a></li>
          <li class="layui-nav-item"><a href="">the links</a></li>
        </ul>
      </div>
    </div>

    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">
        <div class="artbox ">
          <div class="mainbody">
          <div id="main" style="width: 1000px;height:400px;"></div>
        </div>


          <!-- 文章列表 -->
          <div class="Articlelist hide" id="Articlelist">
            <h1>欢迎,{{Userinfo.username }}</h1>
            <div class="search">

              <div class="layui-inline">
                <label class="layui-form-label">筛选文章</label>
                <div class="layui-input-inline">
                  <input type="tel" name="catArt"  autocomplete="off" class="layui-input">
                </div>
                <select class="shenhe" name="" id="search02">
                  <option value="">请选择</option>
                  <option value="0">待审核</option>
                  <option value="1">审核通过</option>
                  <option value="2">审核失败</option>
                </select>
              </div>
              <button class="layui-btn" id="search01" lay-submit="" lay-filter="demo2">搜索</button>
            </div>
            <span> 文件列表</span> <span class="add">添加文章</span>
            <div id="inquiry">
              <table border="1" rules="all" class="layui-table" lay-skin="line">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>标题</th>
                    <th>内容</th>
                    <th>封面</th>
                    <th>所属分类</th>
                    <th>作者</th>
                    <th>统计时间</th>
                    <th>状态</th>
                    <th>操 作</th>
                  </tr>
                </thead>
                <tbody id="catepage">

                </tbody>

              </table>
              <div id="test1"></div>
            </div>
          </div>
          <div class="ganfan" id="ganfan" style="display: none;">

          </div>

          <!-- recycle -->
          <div class="recycle">
            <span>回收站</span>
            <div class="searchRecycle"></div>
          </div>
          <!-- classify -->
          <div id="classify"></div>
        </div>
      </div>
    </div>

    <div class="layui-footer">
      <!-- 底部固定区域 -->

    </div>
    <!-- 编辑 -->
    <div class="upda r layui-container" style="display: none;">
      <form action="/update" method="POST" enctype="multipart/form-data" id="editData">
        <div class="">
          <!-- <div class=""> 标题: <input type="text" name="fo_title" id="edit_title" value=""><br></div> -->
          <div class="">
            标题:
            <input type="text" name="fo_title" id="edit_title" required lay-verify="required" placeholder="请输入标题"
              autocomplete="off" class="layui-input ">

          </div>

          <div>
            <input type="radio" name="fo_status" value='0' title="待审核">待审核
            <input type="radio" name="fo_status" value='1' title="审核通过">审核通过
            <input type="radio" name="fo_status" value='2' title="审核失败">审核失败
          </div>

          <div> <span>所属分类</span><select name="fo_cat" id="classify3">
              <option value="0">所属分类</option>
              <option value=1 name="fo_tiyu">体育</option>
              <option value=2 name="fo_wenxue">文学</option>
              <option value=3 name="fo_child">儿童</option>
              <option value=4 name="fo_new">新闻</option>
              <option value=5 name="fo_bagua">八卦</option>
            </select></div><br>
          <div class=""> 作者: <input type="text" name="fo_author" id="edit_author"><br></div>
          <!-- <div class=""> 内容: <input type="text" name="fo_content" id="edit_content"><br></div> -->
          <div id="div1">

          </div>

        </div>
        <div class=""> 封面: <button class="upimg"><i class="iconfont icon-upload"></i> <span>
              上传图片</span></button></div>
        <input type="file" name="fo_file" class="morefile hide"><br>

        <input type="hidden" name="fo_id" id="edit_id" value=""><br>
        <input type="hidden" name="fo_url" id="fo_url" value=""><br>
        <div class="yl">预览
          <img src="" alt="" id="img" class="ylimg">
        </div>
        <div class=""> <input type="button" value="修改" id="upedit">
          <button class="equi layui-btn" type="button" class="layui-btn"><i
              class="layui-icon layui-icon-right"></i></button>
        </div>
    </div>
    </form>

  </div>
  <!-- 添加 -->
  <div class="addtext r">
    <form action="/addart" method="POST" enctype="multipart/form-data" id="addart">
      <div class=""> 标题: <input type="text" name="fo_title"><br></div>
      <select name="fo_cat" id="classcat2">
        <option value="0">所属分类</option>
        <option value=1 name="fo_tiyu">体育</option>
        <option value=2 name="fo_wenxue">文学</option>
        <option value=3 name="fo_child">儿童</option>
        <option value=4 name="fo_new">新闻</option>
        <option value=5 name="fo_bagua">八卦</option>
      </select><br>
      作者: <input type="text" name="fo_author"><br>
      <!-- 内容: <input type="text" name="fo_content"><br> -->
      <div id="div2">

      </div>
      <!-- 封面:<input type="file" name="fo_file" id="add_file"><br> -->
      封面:
      <button class="upimg"><i class="iconfont icon-upload"></i> <span> 上传图片</span></button>
      <input type="file" name="fo_file" class="morefile hide"><br>
      <input type="button" value="添加" id="addbtn">
      <input type="reset" value="清空" class="">

      <button class="equiadd layui-btn" type="button" class="layui-btn"><i
          class="layui-icon layui-icon-right"></i></button>
    </form>
    <div class="yl">预览
      <img src="" alt="" id="img2" class="ylimg">
    </div>


  </div>
  </div>
  <script src="/static/JS/jquery-3.5.1.js"></script>
  <script src="/static/JS/layui/layui.js"></script>
  <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
  <script>
    //JS 
    var laypage;
    let curr = 1;
      let limit = 5;
      let isSearch = false;
      let searchboj;
    //发送数据
    function getArticleData(curr, limit, callback,search={}) {
      //进行查询,输入页数,显示页数
      let searchobj =Object.assign({ curr, limit },search )
      $.get('/articleCount', searchobj, function (res) {
        callback && callback(res)
      }, 'json');
    }
      
    //渲染分页,
    function renderPage(laypage, Ele, count, limit) {

      laypage.render({
        elem: Ele,
        count: count,
        limit: limit,
        jump: function (obj) {

          //每次点击的时候都会执行
          //获得当前页数,获取数据
          let { curr, limit } = obj;
          if(isSearch){ return isSearch=false;}
          getArticleData(curr, limit, res => {
            console.log( "查询后获得",res)
            let tbody = renderTable(res.data)
            $("#catepage").html(tbody);
          },searchboj)
          //渲染节点

        }
      })
    }
    function renderTable(data) {
      contentHtml = "";
      console.log("上级获得到的参数", data)
      data.forEach((item, index) => {
        index = index + 1;
        let { title, content, img_url, classify, author, add_time, statu3, art_id } = item;
        classify ? classify : classify = "未分类"
        content ? content = content.replace(/(\<.*?\>)/g, "").slice(0, 15) : content = ""
        contentHtml += `<tr  art_id="${art_id}">
                    <td>${index}</td>
                    <td>
                        <div class="">${title}</div>
                    </td>
                    <td>
                        <div class="title"><span class="unline" >${content} </span> </div> 
                    </td>
                    <td>
                      <a href="${img_url}"  data-lightbox="example-1" data-title="${title}">  <img src="${img_url}"></a>
                    </td>

                    <td>${classify}</td>
                    <td>${author}</td>
                    <td class="time">${add_time}</td>
                    <td class="time">${statu3}</td>
                    <td class="time">
                      <button type="button" edit_id=${art_id} class="layui-btn layui-btn-sm layui-btn-danger edit">
                        <i class="layui-icon layui-icon-edit"></i>
                      </button>
                    
                        <a href="javascript:" class="layui-btn layui-btn-sm layui-btn-danger" onclick="confirmRecycle('${art_id}');">加入回收站</a>
                        <a href="javascript:" class="layui-btn layui-btn-sm layui-btn-danger" onclick="confirmDelete('${art_id}','${img_url}');">永久删除</a>
                    </td>
                </tr>`;

      });

      return contentHtml;
    }
    //渲染表格
//搜索文章
    $("#search01").click(function(){
    let   intEle= $("input[name=catArt]").val();
    let   selEle=$( "#search02").val()
     searchboj={ intEle ,selEle}
    
    console.log( searchboj)
   
    getArticleData(curr, limit,function(res){
      //渲染分页
      console.log(res)
      let tbody = renderTable(res.data)

      $("#catepage").html(tbody);
      isSearch=true
        renderPage(laypage, 'test1', res.count, limit)
       
    },searchboj)

    })
    layui.use(['element', 'layer', 'util', "form", "laypage"], function () {
      var element = layui.element
        , layer = layui.layer
        , util = layui.util,
        form = layui.form;
        laypage = layui.laypage,


        $ = layui.$;

      //头部事件
      util.event('lay-header-event', {
        //左侧菜单事件
        menuLeft: function (othis) {
          layer.msg('展开左侧菜单的操作', { icon: 0 });
        }
        , menuRight: function () {
          layer.open({
            type: 1
            , content: '<div style="padding: 15px;">暂无消息</div>'
            , area: ['260px', '100%']
            , offset: 'rt' //右上角
            , anim: 5
            , shadeClose: true
          });
        }
      });
      form.on('submit(changepass)', function (data) {
        let passzz = /^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])).{6,12}$/
        console.log(data.field)
        console.log(data.field.password1)
        console.log(data.field.password2)
        console.log(data.field.password3)
        if (!passzz.test(data.field.password2)) {
          layer.msg("新密码必须包含大小字母及数字")

          return false;
        } else if (data.field.password2 != data.field.password3) {
          layer.msg("两次密码不一致");
          return false;
        }

        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (this.readyState === 4 && this.status === 200) {
            let result = JSON.parse(this.responseText)
            if (result.status == "10000") {
              layer.msg("修改成功");
              layer.close(openpass);
            } else {
              layer.msg(`${result.message}`);
            }
          }
        }
        xhr.open("post", "/uppassword", true)
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        xhr.send(`password1=${data.field.password1}&password2=${data.field.password2}`)
        // layer.msg(JSON.stringify(data.field));
        // layer.msg("修改成功");
        // layer.close(openpass);
        return false;
      });
      form.on('submit(classifyAdd)', function (data) {
        console.log(data.field.classify3)
        $.post("/addClassify", { "classify": data.field.classify3 }, function (result) {
          if (result.status == 20000) {
            layer.msg(result.message)
            $("#list_classify").click()
            return layer.close(addclaaify);
          } else {
            layer.msg(result.message)

          }
        })
        return false
      });
      form.on('submit(classifyupdata)', function (data) {
        console.log(data.field, editid)
        $.post("/updataClassify", { "classify": data.field.classify3, "ishide": data.field.is_show, "article": editid }, function (result) {
          if (result.status == 20000) {
            layer.msg(result.message)
            $("#list_classify").click()
            return layer.close(addclaaify);
          } else {
            layer.msg(result.message)

          }
        })
        return false
      });

    
      getArticleData(curr, limit, res => {
        let { count, data } = res;
        // 渲染分页结构 
        console.log("渲染分页结构",res)
        console.log(laypage)
        isSearch = true;
        renderPage(laypage, 'test1', count, limit)
        let tbody = renderTable(res.data)
            $("#catepage").html(tbody);
      });






    });
//获取分类数量,文章数量
$.get("/cateArticleCount",function(data){
  console.log( data)
   var catename=data.map(item => item.classify? item.classify: item.classify="未分类")
  //  console.log(catename)
   var catecount=data.map(item => item.count)
  //  console.log(catecount)
     // 基于准备好的dom，初始化echarts实例
     var myChart = echarts.init(document.getElementById('main'));
 
 // 指定图表的配置项和数据
 var option = {
     title: {
         text: '文章分类统计'
     },
     tooltip: {},
     legend: {
         data:['文章数量']
     },
     xAxis: {
         data: catename
     },
     yAxis: {},
     series: [{
         name: '章量',
         type: 'bar',
         data: catecount
     }]
 };

 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
})

    
  </script>
  <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
  <script src="/static/JS/index.js"></script>
  <script src="/static/JS/wangEditor.js"></script>
  <script>
    const E = window.wangEditor
    const editor = new E('#div1')
    const editor2 = new E('#div2')
    editor.config.uploadImgShowBase64 = true;
    editor2.config.uploadImgShowBase64 = true
    // 或者 const editor = new E( document.getElementById('div1') )
    editor.create()
    editor2.create()
  </script>
  <script src="/static/JS/lightbox-plus-jquery.min.js"></script>
  
</body>

</html>